<template>
  <div class="editCustom" v-loading.body="loading">
    <el-form :model="customDetail" :rules="rules" ref="ruleForm" label-width="100px" >
      <el-form-item label="家长名字" prop="parent_name">
        <el-input class="short"  v-model="customDetail.parent_name"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile_num">
        <el-input class="short" v-model="customDetail.mobile_num"></el-input>
      </el-form-item>
      <el-form-item label="所在地址" prop="district">
        <el-input class="short" v-model="customDetail.district"></el-input>
      </el-form-item>
      <el-form-item label="所在行业" prop="parent_industry">
        <el-input class="short" v-model="customDetail.parent_industry"></el-input>
      </el-form-item>
      <el-form-item label="客户来源" prop="source_id" ref="">
        <el-select ref="source_id" class="short"
          @change="changeVal($refs['source_id'], dataDictionary.custom_source[customDetail.source_id])"
          v-model="customDetail.source_id" >
          <el-option  v-for="(text, id) in dataDictionary.custom_source" :label="text" :value="parseInt(id)" :key="id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户类型" prop="custom_type" ref="">
        <el-select ref="custom_type"
          @change="changeVal($refs['custom_type'], dataDictionary.custom_type[customDetail.custom_type])"
          v-model="customDetail.custom_type"  class="short">
          <el-option  v-for="(text, id) in dataDictionary.custom_type" :label="text" :value="id"  :key="id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户属性" prop="custom_property" ref="">
        <el-select ref="custom_propety"
          @change="changeVal($refs['custom_propety'], dataDictionary.custom_propety[customDetail.custom_property])"
          v-model="customDetail.custom_property" class="short">
          <el-option  v-for="(text, id) in dataDictionary.custom_propety" :label="text" :value="id"  :key="id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户状态" prop="custom_status" ref="">
        <el-select ref="custom_status" class="short"
          @change="changeVal($refs['custom_status'], dataDictionary.custom_status[customDetail.custom_status])"
          v-model="customDetail.custom_status" >
          <el-option  v-for="(text, id) in dataDictionary.custom_status" :label="text" :value="id"  :key="id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import commonFilter from '../common/customs'
import { Upload, Table, Button,
  TableColumn, Pagination, Form, FormItem, Select, Input, Option } from 'element-ui'
import { mapState, mapActions } from 'vuex'

export default {
  methods: {
    initCustom (id) {
      this.getCustom({ id: id }).then((response) => {
        console.log(response.data.errcode)
        if (response.data.errcode === 0) {
          this.customDetail = response.data.results
        }
        this.loading = false
      }).catch((err) => {
        console.log(err)
        this.loading = false
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveCustom(this.customDetail).then((response) => {
            if (response.data.errcode === 0) {
              this.$router.push({ name: 'customsDt', params: { id: this.customId }})
            }
          }).catch((err) => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    ...commonFilter,
    ...mapActions({
      getCustom: 'getCustom',
      saveCustom: 'saveCustom'
    })
  },
  components: {
    [Button.name]: Button,
    [Upload.name]: Upload,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Pagination.name]: Pagination,
    [Form.name]: Form,
    [Select.name]: Select,
    [Input.name]: Input,
    [Option.name]: Option,
    [FormItem.name]: FormItem
  },
  computed: {
    ...mapState({
      dataDictionary: state => state.custom.data_dictionary
    })
  },
  watch: {
    dataDictionary (val) {

    },
    loading (val) {
      this.$emit('changeLoading', val)
    }
  },
  mounted () {
    this.customId = this.$route.params.id
    this.initCustom(this.customId)
  },
  data () {
    return {
      loading: true,
      customDetail: {},
      customId: '',
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        nick_name: [
          { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
        ],
        mobile_num: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为11位数字', trigger: 'blur' }
        ],
        district: [
          { required: true, message: '请输入所在地址', trigger: 'blur' }
        ],
        parent_industry: [
          { required: true, message: '请输入家长的行业', trigger: 'blur' }
        ],
        // source_id: [
        //   { min: 1, message: '请选择客户来源', trigger: 'blur' }
        // ],
        custom_type: [
          { min: 1, message: '请选择客户类型', trigger: 'blur' }
        ],
        custom_property: [
          { min: 1, message: '请选择客户属性', trigger: 'blur' }
        ],
        custom_status: [
          { min: 1, message: '请选择跟进状态', trigger: 'blur' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>
<style lang="scss">
  .editCustom {
    padding-bottom: 20px;
  }
</style>
